import React, { Component } from 'react';
import { Navbar, Jumbotron, Button } from 'react-bootstrap';
import { Form, Input, Menu, Badge } from 'antd';
import { getInfo } from '../../service/loginService';
import {
    Card
} from 'antd';//引入组件
import BreadcrumbCustom from '../common/BreadcrumbCustom';
import $ from 'jquery';
const FormItem = Form.Item;


export default class TestBootstraps extends Component {

    constructor(props) {
        super(props);
        this.state = {
            htmlInterviewerContent: "",
        };
    }

    componentDidMount() {
        $("#myButton4").click(function () {

            $(this).after("<div>我是jquery创建的元素</div>")
            // $(this).button("loading").delay(1000).queue(function() {
            //     $(this).button('complete');
            // });        
        });
    }

    //面试官富文本修改
    handleinterviewChange = (content) => {
        this.setState({ htmlInterviewerContent: content });
    }


    myUploadFn = (param) => {
        const serverURL = 'http://localhost:19463/api/recruitment/ImageUpload/get'
        const xhr = new XMLHttpRequest
        const fd = new FormData()


        console.log('param.file', param.file);



        const successFn = (response) => {
            // 假设服务端直接返回文件上传后的地址
            // 上传成功后调用param.success并传入上传后的文件地址

            console.log('xhr.responseText', xhr.responseText);
            param.success({
                url: xhr.responseText,
                meta: {
                    id: 'xxx',
                    title: 'xxx',
                    alt: 'xxx',
                    loop: true, // 指定音视频是否循环播放
                    autoPlay: true, // 指定音视频是否自动播放
                    controls: true, // 指定音视频是否显示控制栏
                    poster: 'http://xxx/xx.png', // 指定视频播放器的封面
                }
            })
        }

        const progressFn = (event) => {
            // 上传进度发生变化时调用param.progress
            param.progress(event.loaded / event.total * 100)
        }

        const errorFn = (response) => {
            // 上传发生错误时调用param.error
            param.error({
                msg: 'unable to upload.'
            })
        }

        // xhr.upload.addEventListener("progress", progressFn, false)
        xhr.addEventListener("load", successFn, false)
        xhr.addEventListener("error", errorFn, false)
        xhr.addEventListener("abort", errorFn, false)

        fd.append('file', param.file)
        xhr.open('POST', serverURL, true)
        xhr.send(fd)

    }


    Add = () => {
        var formData = new FormData($("#userForm")[0]);  // 定位到userForm表单，并将表单定位转为FormData对象
        $.ajax({
            url: 'http://localhost:6676/api/fileUpload',   //网络请求url地址
            type: 'POST',
            data: formData, //表单数据
            cache: false,
            contentType: false,  //或者 contentType:multipart/form-data均可以，multipart/form-data表示可以上传下载文件（既可以发送文本数据，也支持二进制数据上载），表明传输的数据要用到多媒体传输协议，由于多媒体传输的都是大量的数据，所以规定上传文件必须是post方法；contentType默认为application/x-www-form-urlencoded不能上传文件
            processData: false,
            success: function (data) {
                console.log('成功');
            }.bind(this),
            error: function (xhr, status, err) {
            }.bind(this)
        });
    }


    getInfo=()=>{

        this.getInfodetail().then((x)=>{
            this.setState({info:x})
        })

    }

    async getInfodetail()
    {
       let s =   await  getInfo()
       
       return s;
    }



    render() {

        let sr = [{id:1,name:'223'},{id:2,name:'mmm'},{id:3,name:'2zz23'}]

        let s = sr.map((x,i)=>{
            return  <li key={x.id}>{x.name}</li>
        })


        return  <div>
          <ul>
          {s}
        </ul>  
        </div>
        // <div>
        //     <BreadcrumbCustom paths={['首页', 'Bootstrap测试']} />
        //     <nav className="navbar navbar-default" style={{ marginBottom: 0 }} id="myNavbar">

        //         <div className="container">
        //             <div className="navbar-header">
        //                 <a href="" className="navbar-brand">xx公司</a>
        //                 <button className="btn btn-default navbar-toggle" data-toggle="collapse" data-target="#myNav">
        //                     <span className="icon-bar"></span>
        //                     <span className="icon-bar"></span>
        //                     <span className="icon-bar"></span>
        //                 </button>
        //             </div>
        //             <div className="collapse navbar-collapse" id="myNav">
        //                 <ul className="nav navbar-nav navbar-right">
        //                     <li className="active"><a href="#ffff">首页</a></li>
        //                     <li><a href="#zzzz">案例</a></li>
        //                     <li className="dropdown">
        //                         <a href="" className="dropdown-toggle" data-toggle="dropdown">
        //                             产品
		// 					<span className="caret"></span>
        //                         </a>
        //                         <ul className="dropdown-menu">
        //                             <li><a href="">时尚女装</a></li>
        //                             <li><a href="">精品男装</a></li>
        //                         </ul>
        //                     </li>
        //                     <li><a href="">关于我们</a></li>
        //                 </ul>
        //             </div>

        //         </div>


        //     </nav>

        //     <div className="jumpbotron" id="myinfo" style={{ background: '#333', color: '#FFF' }}>
        //         <div className="container">
        //             <h1>限时抢购</h1>
        //             <p>本网站有一批最新的xxx产品，现低价抢购，先抢先得……</p>
        //         </div>

        //     </div>

        //     <div className="container">

        //         <div className="col-sm-9"><br />
        //             <div id="ffff">

        //                 <Form id="userForm" enctype="multipart/form-data">
        //                     <FormItem ><Input type="file" name="file" /></FormItem>
        //                     <FormItem  ><Button onClick={this.Add.bind(this)}>提交</Button> </FormItem>
        //                 </Form>
        //             </div>


        //             <div id="zzzz">


        //                     <input type="text" className="" value={this.state.info}  />

        //                     <input type="button"  onClick={()=>{this.getInfo()}} value="获取" className="btn btn-primary"/>

        //             </div>

        //         </div>

        //         <div className="col-sm-3">
        //             <div className="contentRight">
        //                 <blockquote>
        //                     <p>本类排行</p>
        //                 </blockquote>
        //                 <div className="list-group">
        //                     <a href="" className="list-group-item">xxx牌潮流女装</a>
        //                     <a href="" className="list-group-item">xxx牌潮流女装</a>
        //                     <a href="" className="list-group-item">xxx牌潮流女装</a>
        //                     <a href="" className="list-group-item">xxx牌潮流女装</a>
        //                     <a href="" className="list-group-item">xxx牌潮流女装</a>
        //                 </div>

        //                 <div className="hidden-xs">
        //                     <blockquote>
        //                         <p>随机推荐</p>
        //                     </blockquote>
        //                     <div className="list-group">
        //                         <a href="" className="list-group-item">xxx牌潮流女装</a>
        //                         <a href="" className="list-group-item">xxx牌潮流女装</a>
        //                         <a href="" className="list-group-item">xxx牌潮流女装</a>
        //                     </div>
        //                 </div>
        //             </div>
        //         </div>
        //     </div>

        //     <footer style={{ background: '#CCC', padding: '15px' }}>
        //         <div class="container text-center">
        //             <div>
        //                 <a href="">招贤纳士</a>&nbsp;&nbsp;|&nbsp;&nbsp;
        //                     <a href="">法律依据</a>&nbsp;&nbsp;|&nbsp;&nbsp;
        //                     <a href="">联系我们</a>
        //             </div>
        //             版权所有 &copy; xx公司
        //             </div>
        //     </footer>


        // </div>

    }

}